<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <script src="../node_modules/prop-types/prop-types.js"></script>
  </head>
  <body>
    <div id="reactDom"></div>
    <script type="text/babel">
      // 1.无状态组件的props验证和默认值
      // 默认值 需要defaultProps
      function Com(props) {
        return <div>我是无状态组件----{props.name}</div>;
      }
      Com.defaultProps = {
        name: "我是props中name的默认值",
      };

      //   2.props验证 --- 验证传递进来的数据是否符合我们期望的类型或者要求  上线模式中请取消props
      // 1.引用prop-types库  npm install --save prop-
      Com.propTypes = {
        name: PropTypes.number, //验证name这个props传递进来的数据必须是number类型
      };

      ReactDOM.render(
        <Com name="我是name的数据" />,
        document.getElementById("reactDom")
      );
    </script>
  </body>
</html>
